<template>
    <div class="container">
        <div id="cesiumContainer"></div>
    </div>
</template>
  
<script>
import axios from 'axios'
//   var viewer, camera;
window.viewer = null;
window.camera = null;
window.mapPointList = [];
export default {
    name: 'MapContainerSuper',
    data() {
        return {
            dataList: [],
            lujingdata: [[104.064236,30.658303],
            [104.064246,30.65774],
            [104.064268,30.657265],
            [104.064284,30.656813],
            [104.0643,30.656374],
            [104.064804,30.656416],
            [104.065368,30.656407],
            [104.065824,30.656416],
            [104.065813,30.656988],
            [104.065845,30.65744]]
        };
    },
    mounted() {
        this.init();
        this.$bus.$on('makersShow', this.makersShow);
        this.$bus.$on('polyLineShow', this.polyLineShow);
        this.$bus.$on('animationLineShow', this.animationLineShow);
    },
    methods: {
        init() {
            window.viewer = new Cesium.Viewer("cesiumContainer", {});
            // var layer = viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
            //   url: 'https://dev.virtualearth.net',
            //   mapStyle: Cesium.BingMapsStyle.AERIAL,
            //   key: "AmatP81xuykwRqbOH8TsyxcyLCH0y09G0-u1IvGnZP3B8296Hgwkhyf-gERLNrFy" //由BingMap官网申请的密钥
            // }));

            //高德二维地图自带路网注记
            var vec = new Cesium.UrlTemplateImageryProvider({
                url: "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
                minimumLevel: 3,
                maximumLevel: 18
            });
            window.viewer.imageryLayers.addImageryProvider(vec);
            //   初始化场景位置
            window.viewer.scene.camera.flyTo({
                // 初始化相机经纬度（这里使用了经纬度转换世界坐标的方法）
                destination: new Cesium.Cartesian3.fromDegrees(
                    104.065743,
                    30.65751,
                    // 107.502262,
                    // 31.209484,  //达州
                    // 117.4603186710001,
                    // 31.14388249900003,
                    2000
                ),
                orientation: {
                    heading: Cesium.Math.toRadians(0.0),
                    pitch: Cesium.Math.toRadians(-90.0), //从上往下看为-90
                    roll: 0,
                },
            });
            //创建DataSource
            window.datasource = new Cesium.CustomDataSource("enetiestestdata");
            window.viewer.dataSources.add(window.datasource)

        },
        makersShow() {
            window.viewer.entities.add({
                position: Cesium.Cartesian3.fromDegrees(104.065747, 30.657475, 20),
                billboard: {
                    image: require("../../../public/static/images/poi.png"), // default: undefined
                    // show: true, // default
                    // pixelOffset: new Cesium.Cartesian2(0, -50), // default: (0, 0)
                    // eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0), // default
                    // horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // default
                    // verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // default: CENTER
                    // scale: 1.0, // default: 1.0
                    // // color: Cesium.Color.LIME, // default: WHITE
                    // // rotation: Cesium.Math.PI_OVER_FOUR, // default: 0.0
                    // alignedAxis: Cesium.Cartesian3.ZERO, // default
                    // width: 50, // default: undefined
                    // height: 50, // default: undefined
                },
            });
            // this.getList();
        },
        polyLineShow() {
            window.viewer.entities.add({
                // name:entity.name,
                polyline: {
                    positions: Cesium.Cartesian3.fromDegreesArray([104.065747, 30.657475, 104.065725, 30.658334, 104.067442, 30.658361, 104.067388, 30.656423, 104.071015, 30.656506]),
                    width: 5,
                    material: Cesium.Color.DARKORANGE.withAlpha(0.7),
                    // clampToGround: true,
                    show: true,
                },
            });

            // 在上边添加过的线基础上我们再添加一条动效线
            // window.viewer.entities.add({
            //     // name:entity.name,
            //     polyline: {
            //         positions: Cesium.Cartesian3.fromDegreesArray([
            //             104.065747, 30.657475, 104.065725, 30.658334, 104.067442, 30.658361, 104.067388, 30.656423, 104.071015, 30.656506
            //         ]),
            //         width: 4, // 线的宽度，像素为单位
            //         material: new Cesium.PolylineTrailMaterialProperty({
            //             // 尾迹线材质
            //             color: Cesium.Color.GOLD,
            //             trailLength: 0.4,
            //             period: 3.0,
            //         }),
            //     },
            // });

        },
        getList() {
            axios({
                method: "GET",
                url: "http://192.168.10.175:48080/admin-api/LS/fireControlUnit/queryList",
                headers: { Authorization: "Bearer 44a8b164d527431f8ec89099161d47f9" }
            }).then(
                response => {
                    response.data.data.forEach(element => {
                        this.dataList.push([element.gisX, element.gisY])
                    });
                    console.log(this.dataList);
                    window.mapPointList = [];
                    this.dataList.forEach(element => {
                        window.mapPointList.push(this.createPoint(element));
                    });
                    console.log('mapPointList:', window.mapPointList);
                    window.mapPointList.forEach(item => {
                        window.viewer.entities.add(item);
                    })
                },
                error => {
                    console.log('错误信息为：', error)
                }
            )
        },
        createPoint(data) {
            return {
                position: Cesium.Cartesian3.fromDegrees(data[0], data[1], 20),
                billboard: {
                    image: require("../../../public/static/images/poi.png"), // default: undefined
                    // show: true, // default
                    // pixelOffset: new Cesium.Cartesian2(0, -50), // default: (0, 0)
                    // eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0), // default
                    // horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // default
                    // verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // default: CENTER
                    // scale: 1.0, // default: 1.0
                    // // color: Cesium.Color.LIME, // default: WHITE
                    // // rotation: Cesium.Math.PI_OVER_FOUR, // default: 0.0
                    // alignedAxis: Cesium.Cartesian3.ZERO, // default
                    // width: 50, // default: undefined
                    // height: 50, // default: undefined
                }
            }
        },
        animationLineShow() {
            //添加线
        window.datasource.entities.add({
            name: "line",
            polyline: {
                // positions: Cesium.Cartesian3.fromDegreesArrayHeights(this.lujingdata.flat()),
                positions: Cesium.Cartesian3.fromDegreesArray(this.lujingdata.flat()),
                material: Cesium.Color.RED,
                width: 1
            }
        })

        var property = new Cesium.SampledPositionProperty();
        var starttime = new Date();
        var stoptime;
        var timestamp = starttime.getTime();

        this.lujingdata.forEach((pos, index) => {
            var time = new Date(timestamp + index * 5000);
            stoptime = time;
            var position = Cesium.Cartesian3.fromDegrees(pos[0], pos[1], pos[2])
            property.addSample(Cesium.JulianDate.fromDate(time), position);
        })
        property.setInterpolationOptions({
            interpolationDegree: 0.0001,
            interpolationAlgorithm: Cesium.LagrangePolynomialApproximation
        });

        var entitydd = window.datasource.entities.add({
            availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
                start: Cesium.JulianDate.fromDate(starttime),
                stop: Cesium.JulianDate.fromDate(new Date(stoptime))
            })]),
            position: property, // 点集
            //朝向
            orientation: new Cesium.VelocityOrientationProperty(property),
            // billboard: {
            //     image: "./yingjiwuzi.png",
            //     scale: 0.5,
            //     pixelOffset: new Cesium.Cartesian2(0, -120),
            //     heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            //     clampToGround: true  //是否贴地
            // },
            label: {
                text: "",
                fillColor: Cesium.Color.RED,
                pixelOffset:new Cesium.Cartesian2(0,-30)
            },
            model: {
                uri: './static/images/xiaofangche.gltf',
                scale: 1,
                minimumPixelSize: 70,
                maximumScale: 70
            },
            path: {
                leadTime: 0,
                resolution: 1,
                material: new Cesium.PolylineGlowMaterialProperty({
                    glowPower: 0.1,
                    color: Cesium.Color.GREEN
                }),
                width: 10
            }
        });
        window.viewer.clock.onTick.addEventListener((tick) => {
            entitydd.position.getValue(tick.currentTime);
            //  console.log(entitydd.position.getValue(tick.currentTime));
            //转为经纬度
            var cartographic = Cesium.Ellipsoid.WGS84.cartesianToCartographic(entitydd.position.getValue(tick.currentTime))
            cartographic.longitude = Cesium.Math.toDegrees(cartographic.longitude)
            cartographic.latitude = Cesium.Math.toDegrees(cartographic.latitude)
            // console.log(cartographic);
            // entitydd.label.text = Number(cartographic.longitude).toFixed(4) + "," + Number(cartographic.latitude).toFixed(4);
        })

        window.viewer.trackedEntity =entitydd;
        window.viewer.clock.currentTime = Cesium.JulianDate.fromDate(starttime); //修改时间轴的当前时间
        window.viewer.clock.stopTime = Cesium.JulianDate.fromDate(new Date(stoptime));
        window.viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP,
        window.viewer.clock.shouldAnimate = true; //开始播放
        //viewer.zoomTo(datasource)
        },
    },
};
</script>
  
<style scoped></style>
  